<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../css/biaoge.css"/>
    <script src="../js/jquery-3.3.1.min.js"></script>






</head>
<body>




<ul id="dao">
    <li data-id="index">首页</li>
    <li data-id="new">新闻中心</li>
    <li data-id="dong">企业动态</li>
    <li data-id="our">联系我们</li>
</ul>

<div id="index" class="pu">我是首页</div>
<div id="new" class="pu">新闻中心</div>
<div id="dong" class="pu">企业动态</div>
<div id="our" class="pu">联系我们</div>


<ul class="er">
    <li>
        <span>动态</span>
        <ul>
            <li>动态1</li>
            <li>动态2</li>
            <li>动态3</li>
        </ul>
    </li>

    <li>
        <span>核心</span>
        <ul>
            <li>核心1</li>
            <li>核心2</li>
            <li>核心3</li>
            <li>核心4</li>
        </ul>
    </li>
    <li>
        <span>事件</span>
        <ul>
            <li>事件1</li>
            <li>事件2</li>
            <li>事件3</li>
        </ul>
    </li>
</ul>







<script>

    $('#dao>li').click(function(){

        $(this).addClass("on");
        $(this).siblings().removeClass("on");


        var dataId = $(this).data('id');

        $('.pu').hide();
        $('#'+dataId).show();

    });


    $('span').click(function(){

        $('.er ul').slideUp();
        $(this).next('ul').slideDown();

    });


</script>



</body>
</html>